<template>
  <div>
    <el-form
      class="form"
      ref="form"
      :model="form"
      label-width="80px"
      label-position="top"
    >
      <el-form-item class="item center">
        <el-upload
          class="avatar-area"
          :action="upImgSrc()"
          :limit="1"
          :headers="{ token: $store.state.token }"
          ref="rebateUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :on-error="up_error"
          :on-exceed="up_overflow"
        >
          <img
            v-if="form.avatar"
            :src="form.avatar | imgSrc"
            class="avatar-img"
          />
          <i
            v-else
            class="el-icon-user-solid avatar-uploader-icon add-icon"
          ></i>
        </el-upload>
      </el-form-item>
      <el-form-item class="item">
        <span slot="label" class="head-lab">{{ t("用户名称") }}</span>
        <el-input v-model="form.nickname" clearable></el-input>
      </el-form-item>
      <el-form-item class="item">
        <span slot="label" class="head-lab">{{ t("电话号码") }}</span>
        <div class="input-area">
          <el-input
            class="phone"
            v-model="form.mobile"
            clearable
            type="number"
          ></el-input>
          <el-select
            class="phone-regain"
            v-model="form.phoneSection"
            placeholder=""
          >
            <el-option
              label="中国大陆   +86"
              value="中国大陆   +86"
            ></el-option>
            <el-option
              label="中国大陆   +87"
              value="中国大陆   +87"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item class="item">
        <span slot="label" class="head-lab">{{ t("性别") }}</span>
        <el-select class="select" v-model="form.gender">
          <el-option
            :label="item.txt"
            :value="item.id"
            v-for="(item, index) in gender_box"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="item">
        <span slot="label" class="head-lab">{{ t("年龄") }}</span>
        <el-select class="select" v-model="form.birthday">
          <el-option
            v-for="(_, index) in 100"
            :key="index"
            :label="index + 1"
            :value="index + 1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="item">
        <span slot="label" class="head-lab">{{ t("邮箱号") }}</span>
        <el-input v-model="form.email" clearable></el-input>
      </el-form-item>
      <el-form-item class="item" v-if="!changebtn">
        <span slot="label" class="head-lab">{{ t("现有密码") }}</span>
        <el-input v-model="form.password" clearable></el-input>
      </el-form-item>
      <!-- 以下两个未绑定数据------=== -->
      <el-form-item class="item" v-if="!changebtn">
        <span slot="label" class="head-lab">{{ t("新密码") }}</span>
        <el-input v-model="form.email" clearable></el-input>
      </el-form-item>
      <el-form-item class="item" v-if="!changebtn">
        <span slot="label" class="head-lab">{{ t("确认新密码") }}</span>
        <el-input v-model="form.email" clearable></el-input>
      </el-form-item>
      <el-form-item class="item center">
        <el-button
          class="submit-btn"
          v-if="changebtn"
          @click="changebtn = !changebtn"
          >{{ $t("编辑") }}</el-button
        >
        <el-button class="submit-btn" v-else @click="onSubmit">{{
          $t("确定")
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { editUserInfo, baseURL } from "@/utils/api";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      changebtn: true,
      form: {
        avatar: "",
        nickname: "",
        mobile: "",
        phoneSection: "中国大陆   +86",
        gender: 0,
        birthday: "",
      },
      gender_box: [
        {
          id: 0,
          txt: "女",
        },
        {
          id: 1,
          txt: "男",
        },
      ],
    };
  },

  mounted() {
    // console.log(this.$store.state.userInfo);
    this.form = {
      ...this.form,
      ...this.$util.deepClone(this.$store.state.userInfo),
    };
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`账户资料.${v}`);
    },
    upImgSrc() {
      return baseURL("api/common/upload");
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.form.avatar = res.data.url;
    },
    up_error(err, file, fileList) {
      this.$message.error(this.t("头像上传失败"));
    },
    up_overflow(files, fileList) {
      this.$set(fileList[0], "raw", files[0]);
      this.$set(fileList[0], "name", files[0].name);
      this.$refs.rebateUpload.clearFiles(); //清除文件
      this.$refs.rebateUpload.handleStart(files[0]); //选择文件后的赋值方法
      this.$refs.rebateUpload.submit();
    },
    onSubmit() {
      // console.log(this.form);
      editUserInfo(this.form).then((res) => {
        if (res.code == 1) {
          this.changebtn = true;
          this.$message.success(res.msg);
          this.SET_USER(this.form);
        }
      });
    },
    ...mapMutations(["SET_USER"]),
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-input__inner {
  height: 47px;
  border: 1px solid #000;
}
.form {
  padding-top: 10px;

  .head-lab {
    padding: 0;
    color: #222;
    font-size: 16px;
  }

  .item {
    margin-bottom: 0;
    width: 500px;
  }

  .avatar-area {
    position: relative;

    .avatar-img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    .add-icon {
      width: 80px;
      height: 80px;
      font-size: 60px;
    }
  }

  .input-area {
    display: flex;
    flex-direction: row;

    .phone {
      flex: 3;
    }

    .phone-regain {
      margin-left: 14px;
      flex: 2;
    }
  }

  .select {
    width: 100%;
  }

  .submit-btn {
    padding: 0px 78px;
    margin-top: 60px;
    background: #ff5757;
    line-height: 54px;
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
  }
}

.center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/deep/ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
